<template>
  <div>
    <div class="back">
      <!-- 返回 -->
      <VueMovieComeBack :title="nm" />
    </div>

 
    <!-- 选座中心 -->
    <div class="Choose_center">

      <van-row type="flex" class="title_box">
        <van-col span="8"
          ><span class="iconfont choosable">&#xe62f;</span> 可选</van-col
        >
        <van-col span="8"
          ><span class="iconfont selected">&#xe62f;</span> 已选</van-col
        >
        <van-col span="8"
          ><span class="iconfont sold_out">&#xe62f;</span> 已售</van-col
        >
      </van-row>
      <!-- 大屏幕 -->
      <van-row class="lg_screen">
        <van-col span="24"><span>中央屏幕</span></van-col>
      </van-row>
      <!-- 座位 -->
      <van-row type="flex" class="seat">
        <ul class="lin">
         
          <li v-for="(item, index) in nums" :key="index">{{ index + 1 }}</li>
        </ul>
        <van-col  span="3" v-for="item in seatList" :key="item">
          <span
            class="iconfont"
            @click="haveSeat(item)"
            :class="{ active: selected.indexOf(item) != -1 }"
            >&#xe62f;</span
          >
       
        </van-col>
        <van-col> <span class="iconfont red">&#xe62f;</span></van-col>
          
      </van-row>
    </div>
    <div class="hint">
      <div class="hill">一号大厅</div>
   <van-count-down :time="time" >
      <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
  </template></van-count-down>
     
      <van-col span="12">{{getTime()}}</van-col>
      <van-col span="12">{{getTimer()}}:30</van-col>
     
      <p>
        每人票价 <span>35</span> 元/张 , 已选择
        <span>{{ selected.length }}</span> 张
      </p>
    </div>
    <van-submit-bar
      :price="price"
      :decimal-length="0"
      :safe-area-inset-bottom="true"
   tip-icon="info-o"
      button-text="提交订单"
      @submit="payment(id, price)"
    >
    <template #tip>
     为了你观看最佳位置，座位更新有延迟，请快速支付
     <div><van-count-down millisecond :time="time" format="HH:mm:ss:SS" /></div>
  </template>
    </van-submit-bar>
    
  </div>
</template>

<script>
import { Toast } from "vant";
import VueMovieComeBack from "@/components/common/come_back.vue";
export default {
  name: "VueMovieBuyTicket",
  components: { VueMovieComeBack },
  data() {
    return {
      mysh:false,
      id: this.$route.query.id,
      nm: this.$route.query.nm,
      seatList: 80,
      nums: 9,
      selected: [],
       time: 30 * 60 * 60 * 1000,
    
    };
  },

  mounted() {
  this.op()
  },
  created(){  },
  computed: {
    price() {
      return this.selected.length * 35 * 100;
    },
  },
  methods: {
    op(){
this.mysh=true
    },
    start() {
      this.$refs.countDown.start();
    },
    pause() {
      this.$refs.countDown.pause();
    },
    reset() {
      this.$refs.countDown.reset();
    },
    finish() {
      Toast('倒计时结束');
        this.$router.push({
          path: '/order',
          query: { id,price },
        });
    },
    haveSeat(item) {
      if (this.selected.indexOf(item) !== -1) {
        this.selected.splice(this.selected.indexOf(item), 1); //取消
      } else {
        this.selected.push(item); //选中添加到数组里
        this.num = this.selected.length;
      }
    },
    payment(id, price) {
     if (price!==0) {
      // 弹出支付成功 存入列表 跳转订单页面
      Toast.loading({
        message: "支付中...",
        forbidClick: true,
      });
      setTimeout(() => {
        Toast("支付成功");
        this.selected=[]
        // 跳转到订单页面
        this.$router.push({
          path: '/order',
          query: { id,price },
        });
      }, 3000);
     } else {
        Toast("请先锁定座位！");
     }
    },
    getTime() { //获取时间
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var dates = date.getDate();
      var day = date.getDay();
      // 返回时间
      return year + "-" + month + "-" + dates;
    },
     getTimer() { //要多于当前的2个小时
            var time = new Date();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            return h +2
        }
  },
};
</script>

<style lang="less" scoped>
.colon {
    display: inline-block;
    font-size: 24px;
    color: #ee0a24;
  }
  .red{ color: #ee0a24!important;}
  .block {
    display: inline-block;
    width: 80px;
    height: 50px;
   border-radius: 5px;
    color: #fff;
    line-height: 50px;
    font-size: 40px;
    text-align: center;
    background-color: #ee0a24;
  }
.imgbox{height: 100%;
position: absolute;
z-index: -1;
overflow: hidden;
  img{
 
  width: 100%;}
}

// 返回

.back {
  background: linear-gradient(to right, #2c1c1e, #989898);
}
// 时间
.title_box {
 
  height: 40px;
line-height: 40px;
  .van-col {
    
    text-align: center;
    .choosable {
      color: #fafafa;
    }
    .selected {
      color: #5ff7fa;
    }
    .sold_out {
      color: #f04b51;
    }
  }
}
// 选座中心 大屏幕
.Choose_center {
  background-color: #f1f3f4;


  .lg_screen {
   

    text-align: center;
    .van-col {
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 30px solid #ccc;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      height: 0;
      span {
      
        margin-bottom: 27px;
        color: #fff;
      }
    }
  }
  // 座位
  .seat {
    max-width: 280px;
    margin: 0 auto;
    position: relative;
    padding: 10px 50px;
    .lin {
      position: absolute;
      top: 10px;
      left: 30px;
      width: 15px;
      height: 270px;
      border-radius: 3px;
      background-color: #aaa9ab;
      li {
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
      }
      li:nth-child(3) {
      
   color:green;      }
   li:nth-child(4){ color:green; }
   li:nth-child(5){ color:green; }       
    }
 
    .van-col {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      .active {
        color: #5ff7fa;
      }
      span {
        color: #fafafa;
      }


    }
   
  }
}
//   提示
.hint {
  margin-top: 20px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  .hill{font-size: 20px;
  color:grey}
  p {
    margin-top: 20px;
    font-weight: 500;
    font-size: 18px;
    span {
      color: red;
    }
  }
}
   .qq{

       span:nth-child(3) {
      
   color:red;      }
    span:nth-child(23) {
      
   color:red;      }
      span:nth-child(65) {
      
   color:red;      }
   span:nth-child(64) {
      
   color:red;      }
   span:nth-child(9) {
      
   color:red;      }
    }
</style>